<template>
  <div>
    <h1>首页</h1>

    <ul>
      <li>
        <!-- 
          使用 params 传参，path 中，没有定义占坑，也能传递过去（详情页面组件能拿到数据）

          正常是能够在详情页面组件中拿到参数的，但是页面刷新的话就没有了。不要这样用。。。
         -->
        <!-- <router-link :to="{ name: 'detail', params: { id: 100 } }">
          apple
        </router-link> -->

        <!-- 
          router-link 默认渲染的是 a 标签。可以配置 tag 属性来控制它渲染成什么标签。
         -->
        <router-link tag="div" :to="{ name: 'detail', query: { id: 100 } }">
          apple
        </router-link>
      </li>
    </ul>

    <ul>
      <router-link tag="li" :to="{ name: 'detail', query: { id: 100 } }">
        apple
      </router-link>
    </ul>
  </div>
</template>
